<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Examples</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <link href="" rel="stylesheet">
  <script type="text/javascript" src="./vue.js"></script>
</head>

<body>
  <div id="box">
    <input type="text" v-model="task">
    {{task}}
    <button @click="addTask()">添加</button>

    <ul>
      <li v-for="(todo,index) in todoList">
        {{todo}}
        <button @click="removeTask(index)">删除</button>
      </li>
    </ul>
  </div>

  <script>
    new Vue({
      el: "#box",
      data: {
        task: "摸鱼",
        todoList: []
      },
      methods: {
        addTask() {
          this.todoList.push(this.task)
        },
        removeTask(index) {
          this.todoList.splice(index, 1)
        }
      }
    })
  </script>
</body>

</html>